<template>
  <div class="overview">
    <a-page-header
      title="档案管理"
      sub-title="基础数据管理中心"
    />
    
    <a-row :gutter="16">
      <a-col :span="6" v-for="item in overviewData" :key="item.key">
        <a-card hoverable @click="navigateTo(item.path)">
          <template #cover>
            <div class="card-cover">
              <component :is="item.icon" style="font-size: 48px; color: #1890ff;" />
            </div>
          </template>
          <a-card-meta :title="item.title" :description="item.description" />
          <div class="card-stats">
            <a-statistic :title="item.statTitle" :value="item.statValue" />
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-card title="最近更新" style="margin-top: 24px;">
      <a-table
        :columns="recentColumns"
        :data-source="recentUpdates"
        :pagination="false"
        size="small"
      />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  ShopOutlined,
  TeamOutlined,
  TagsOutlined,
  HomeOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()

const overviewData = ref([
  {
    key: 'products',
    title: '商品管理',
    description: '商品信息、规格、价格管理',
    icon: ShopOutlined,
    path: '/products',
    statTitle: '商品总数',
    statValue: 1234
  },
  {
    key: 'suppliers',
    title: '供应商管理',
    description: '供应商信息、合作关系管理',
    icon: TeamOutlined,
    path: '/suppliers',
    statTitle: '供应商数',
    statValue: 89
  },
  {
    key: 'categories',
    title: '分类管理',
    description: '商品分类、层级结构管理',
    icon: TagsOutlined,
    path: '/categories',
    statTitle: '分类数',
    statValue: 156
  },
  {
    key: 'stores',
    title: '门店管理',
    description: '门店信息、区域管理',
    icon: HomeOutlined,
    path: '/stores',
    statTitle: '门店数',
    statValue: 45
  }
])

const recentColumns = [
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '操作人', dataIndex: 'operator', key: 'operator' },
  { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime' },
]

const recentUpdates = ref([
  { type: '商品', name: '苹果 红富士', operator: '张三', updateTime: '2024-01-15 14:30' },
  { type: '供应商', name: '新鲜果业有限公司', operator: '李四', updateTime: '2024-01-15 13:45' },
  { type: '分类', name: '生鲜水果', operator: '王五', updateTime: '2024-01-15 11:20' },
  { type: '门店', name: '中山路店', operator: '赵六', updateTime: '2024-01-15 09:15' },
])

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.overview {
  padding: 24px;
}

.card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f5f5f5;
}

.card-stats {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.ant-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.ant-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>